<div>
    <a id="options" href="#pageslide-content" class="corner-right" rel="tooltip" val= "0" title="Toggle Options">&raquo;</a>
</div>
<div id="pageslide-content" style="display: none;">
    <h2 class="corner-all">Options</h2>
    <!-- options here -->
    <a href="javascript: void 0" id="add-user"><span class="icon user-add" ></span>Add User</a>
    <a href="javascript: void 0" id="edit-user"><span class="icon user-edit" ></span>Edit User</a>
    <a href="javascript: void 0" id="delete-user"><span class="icon user-del" ></span>Delete User</a>
    
    <!-- logout -->
    <a href="#" id="logout"><span class="icon user-medium-silhouette" ></span>Logout</a>
    
    
</div>
<script type="text/javascript" src="../resources/js/jquery.pageslide.js"></script>
<script language="javascript">

$(document).ready(function(){
    
   
    
    $('#options').tooltip({ placement: 'right'});
   
    $("#options").pageslide({ modal: true });
    $("#options").click(function(){ 
          var v = $(this).attr('val');
          if(v == '0'){
            $(this).attr('val','1');
            $(this).html('&laquo;');
           
          }
          else if(v == '1'){
            $(this).attr('val','0');
            $(this).html('&raquo;');
            
          }
    });
    function hide(){
        $('#admin-content').hide();
    }
    function show(){
        $('#admin-content').show('drop');
    }
    $('#add-user').click(function(){
        hide();
        $('#admin-content').load('../resources/includes/add-user.php');
        show();
    });
    $('#edit-user').click(function(){
        hide();
        $('#admin-content').load('../resources/includes/edit-user.php');
        show();
    });
    
    
    $('#logout').click(function(){
        window.location = 'logout.php'
     });
  
});
    

</script>